<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name=referrer content=never>
		<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
		<style>
			#app{
				margin-left: auto;
				margin-right: auto;
				max-width:768px;
				overflow: hidden;
			}
			 * {
            	margin: 0;
            	padding: 0
        	}
        	#app .container:not(:nth-child(4n+4)){
        		margin-right:29px;
        	}
        	.container {
        	transition: all .6s;
        	float: left;	
        	position: relative;
            width: 150px;
            height: 240px;
            padding: 10px;
            font-size: 16px;
            box-shadow: 0 0 5px 3px rgba(51, 51, 51, .26);
            margin-top: 20px;
        }
        .container:hover{
        	transform: translateY(-20px);
        }
        .rate{
        	position: absolute;
        	right:10px;
        	bottom: 6px;
        	color:red;
        }
        img {
            width: 150px;
            height:200px;
        }
        .movie_name{
        	color: blue;
        }
		</style>
		<script>
			var startIndex=0
			$(function(){
				$.ajax({
					type:"get",
					url:"http://192.168.13.13:8080/show/ShowAction?startindex=0&endindex=20",
					async:true,
					dataType:"json",
					success:function(msg){
						//alert(msg)
						var movies = msg.list;
						$.each(movies, function(index,obj) {
							//console.log("index:"+index+"值是:"+obj.cover)
							$("#app").append("<div  class='container'><img src='"+obj.cover+"' title='"+obj.title+"'><p class='movie_name'>"+obj.title.slice(0,6)+"</p><p class='rate'>"+'评分:'+obj.rate+"</p></div>");
						});
					}
				});
			})
			
			function loadingMore(){
				startIndex+=20
				parseInt(startIndex)
				$.ajax({
					type:"get",
					url:"http://192.168.13.13:8080/show/ShowAction?startindex="+startIndex+"&endindex=20",
					async:true,
					dataType:"json",
					success:function(msg){
						//alert(msg)
						var movies = msg.list;
						$.each(movies, function(index,obj) {
							//console.log("index:"+index+"值是:"+obj.cover)
							//$(".container")[0].append("<img src='"+obj.cover+"' title='"+obj.title+"'><p class='movie_name'>"+obj.title.slice(0,6)+"</p><p class='rate'>"+'评分:'+obj.rate+"</p>");
							$("#app").append("<div  class='container'><img src='"+obj.cover+"' title='"+obj.title+"'><p class='movie_name'>"+obj.title.slice(0,6)+"</p><p class='rate'>"+'评分:'+obj.rate+"</p></div>");
						});
					}
				});
			
			}
		</script>
	</head>
	<body>
		
		<div id="app" class="movies">
			
				<!--<img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541901817.jpg"/>
				<p>疯狂的外星人</p>
				<p class="rate">6.4</p>-->
			
		</div>
		<button onclick="loadingMore()">点我加载更多。。。。</button>
	</body>
</html>
